// 用于存放公共样式
//鼠标经过有下滑线出现，鼠标离开下滑线消失
.text {
  position: relative;

  &::after {
    content: '';
    position: absolute;
    width: 100%;
    left: 0;
    bottom: -4px;
    height: 2px;
    background-color: yellow;
    transform: scaleX(0);
    transition: transform.5s ease-out;
    transform-origin: right;
  }

  &:hover {
    &::after {
      transform: scaleX(1);
      transform-origin: left;
    }
  }
}

//字体水平居中
.text-center {
  text-align: center;
}

//字体加粗
.font-bold {
  font-weight: bold;
}
.fs-14 {
  font-size: 14px;
}

.fs-16 {
  font-size: 16px;
}

.flex {
  display: flex;
}

.flex-start {
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

.flex-center {
  display: flex;
  justify-content: center;
  align-items: center;
}
.flex-end {
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

/*
  row:开启flex布局，对高度划分为12分
  row-1/12:占父元素高度的1-12份
  col:开启flex布局，对宽度划分为12分
  col-1/12:占父元素宽度的1-12份
  mr-1/12:margin-right为父元素宽度的1/12份
  ml-1/12:margin-left为父元素宽度的1/12份
**/

//按列/宽分
.col {
  display: flex;
  flex-wrap: wrap;
}

.col-1 {
  width: calc((100% / 12) * 1);
}

.col-2 {
  width: calc((100% / 12) * 2);
}

.col-3 {
  width: calc((100% / 12) * 3);
}

.col-4 {
  width: calc((100% / 12) * 4);
}

.col-5 {
  width: calc((100% / 12) * 5);
}

.col-6 {
  width: calc((100% / 12) * 6);
}

.col-7 {
  width: calc((100% / 12) * 7);
}

.col-8 {
  width: calc((100% / 12) * 8);
}

.col-9 {
  width: calc((100% / 12) * 9);
}

.col-10 {
  width: calc((100% / 12) * 10);
}

.col-11 {
  width: calc((100% / 12) * 11);
}

.col-12 {
  width: calc((100% / 12) * 12);
}

//按行/高分
.row {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
}

.row-1 {
  height: calc((100% / 12) * 1);
}

.row-2 {
  height: calc((100% / 12) * 2);
}

.row-3 {
  height: calc((100% / 12) * 3);
}

.row-4 {
  height: calc((100% / 12) * 4);
}

.row-5 {
  height: calc((100% / 12) * 5);
}

.row-6 {
  height: calc((100% / 12) * 6);
}

.row-7 {
  height: calc((100% / 12) * 7);
}

.row-8 {
  height: calc((100% / 12) * 8);
}

.row-9 {
  height: calc((100% / 12) * 9);
}

.row-10 {
  height: calc((100% / 12) * 10);
}

.row-11 {
  height: calc((100% / 12) * 11);
}

.row-12 {
  height: calc((100% / 12) * 12);
}

//margin-left
.ml-1 {
  margin-left: calc((100% / 12) * 1);
}
.ml-2 {
  margin-left: calc((100% / 12) * 2);
}
.ml-3 {
  margin-left: calc((100% / 12) * 3);
}
.ml-4 {
  margin-left: calc((100% / 12) * 4);
}
.ml-5 {
  margin-left: calc((100% / 12) * 5);
}
.ml-6 {
  margin-left: calc((100% / 12) * 6);
}
.ml-7 {
  margin-left: calc((100% / 12) * 7);
}
.ml-8 {
  margin-left: calc((100% / 12) * 8);
}
.ml-9 {
  margin-left: calc((100% / 12) * 9);
}
.ml-10 {
  margin-left: calc((100% / 12) * 10);
}
.ml-11 {
  margin-left: calc((100% / 12) * 11);
}
.ml-12 {
  margin-left: calc((100% / 12) * 12);
}
//margin-right
.mr-1 {
  margin-right: calc((100% / 12) * 1);
}
.mr-2 {
  margin-right: calc((100% / 12) * 2);
}
.mr-3 {
  margin-right: calc((100% / 12) * 3);
}
.mr-4 {
  margin-right: calc((100% / 12) * 4);
}
.mr-5 {
  margin-right: calc((100% / 12) * 5);
}
.mr-6 {
  margin-right: calc((100% / 12) * 6);
}
.mr-7 {
  margin-right: calc((100% / 12) * 7);
}
.mr-8 {
  margin-right: calc((100% / 12) * 8);
}
.mr-9 {
  margin-right: calc((100% / 12) * 9);
}
.mr-10 {
  margin-right: calc((100% / 12) * 10);
}
.mr-11 {
  margin-right: calc((100% / 12) * 11);
}
.mr-12 {
  margin-right: calc((100% / 12) * 12);
}
